<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="dialogTitle + '选项'"
    size="39%"
    :visible.sync="visibility"
    :append-to-body="true"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        :model="dataForm"
        label-position="right"
        label-width="120px"
        style="width: 600px"
      >
        <el-form-item label="模式">
          <el-radio-group v-model="dataForm.type">
            <el-radio label="radio">单选</el-radio>
            <el-radio label="checkbox">多选</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="选项">
          <el-radio-group v-model="dataForm.option">
            <el-radio :label="1">是/否</el-radio>
            <el-radio :label="2">自定义</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="项目">
          <el-row>
            <el-table :data="dataForm.list" :show-header="false">
              <el-table-column>
                <template slot-scope="{ row }">
                  {{ row }}
                </template>
              </el-table-column>
              <el-table-column width="80">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="handleRemove(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="18"><el-input v-model="item" /></el-col>
            <el-col :span="5" :offset="1">
              <el-button @click="handleAdd">添加</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogType === 'create' ? handleCommit() : updateCommit()"
          >
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { toHtml, parseOptionToData, toTemplate } from '../scripts/option'
import { parseToData } from '@/views/manufacture/template/scripts/base.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    dialogType: {
      required: true,
      type: String,
      default: 'create'
    },
    currentData: {
      type: Object,
      default: null
    },
    dialogTitle: {
      required: true,
      type: String,
      default: '新建'
    }
  },
  data() {
    return {
      item: null,
      dataForm: {
        type: 'radio',
        option: 1,
        list: ['是', '否']
      }
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.reset()
        if (this.currentData) {
          const data = parseToData(
            this.currentData.template,
            null,
            [parseOptionToData],
            this.currentData.id,
            true
          )
          this.dataForm.type = data[0].type
          this.dataForm.list = data[0].options
        }
      }
    },
    dialogType: {
      handler(val) {},
      deep: true
    }
  },
  methods: {
    reset() {
      this.dataForm.type = 'radio'
      this.dataForm.option = 1
      this.dataForm.list = ['是', '否']
      this.item = null
    },
    handleAdd() {
      if (!this.item || this.item.trim().length === 0) {
        this.$message.warning('项目不能为空')
        return
      }
      this.dataForm.list.push(this.item)
      this.item = null
    },
    handleRemove(row) {
      this.dataForm.list.splice(this.dataForm.list.indexOf(row), 1)
    },
    handleClose() {
      this.visibility = false
    },
    handleCommit() {
      const params = {
        type: this.dataForm.type,
        options: this.dataForm.list
      }
      const html = toHtml(params)
      const content = toTemplate(params)
      this.$emit('add', {
        data: params,
        content: content,
        html: html
      })
      this.visibility = false
    },
    updateCommit() {
      const params = {
        type: this.dataForm.type,
        options: this.dataForm.list
      }
      const html = toHtml(params)
      const content = toTemplate(params)
      this.$emit('update', {
        data: params,
        content: content,
        html: html,
        id: this.currentData.id
      })
      this.visibility = false
    }
  }
}
</script>

<style lang="scss">
</style>>
